<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <title>Theme 3</title>
    <link rel="stylesheet" href="css/game.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

    <script src="js/bourke.js"></script>
    <script src="js/triangulate.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/Box2dWeb-2.1.a.3.min.js"></script>

    <style type="text/css">
    .unselectable {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    </style>

</head>

<body class='unselectable'>
    <div data-role="page" id="levelpage">

        <div data-role="content">
            <table id="contenttable">
                <tr>
                    <td>
                        <canvas id="draw" width="800" height="450" style="background-color:#333333;display:block; margin: 0px auto; float:left"></canvas>
                        <canvas id="canvas" width="800" height="450" style="display:block; margin: 0px auto; position: absolute; float:left"></canvas>
                    </td>
                    <td>
                        <input class="rightbutton" type="button" value="Reload" onclick="reloadPage();" />
                        <input class="rightbutton" type="button" value="Menu" onclick="menu();" />
                        <img class="collectable1" src="img/theme3/collectible1_bw.png" height="50" />
                        <br/>
                        <img class="collectable2" src="img/theme3/collectible2_bw.png" height="50" />
                        <br/>
                        <img class="collectable3" src="img/theme3/collectible3_bw.png" height="50" />
                        <br/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="txt" id="leveltxt"></div>
                        <div class="txt" id="leveldescription"></div>
                    </td>
                </tr>
            </table>

            <div data-role="popup" id="popup" data-transition="pop">
                <div data-role="header" role="banner" style="width:400px">
                    <h1 class="ui-title" role="heading" aria-level="1">Congratulations!</h1>
                </div>
                <div data-role="content" role="main">
                    <div style="text-align: center">
                        <div>
                            <img class="collectable1" src="img/theme3/collectible1_bw.png" height="50" />
                            <img class="collectable2" src="img/theme3/collectible2_bw.png" height="50" />
                            <img class="collectable3" src="img/theme3/collectible3_bw.png" height="50" />
                        </div>
                    </div>
                    <input type="button" value="Next Level" data-theme="b" onclick="next();" />
                    <input type="button" value="Reload Level" onclick="reloadPage();" />
                    <input type="button" value="Menu" onclick="menu();" />
                </div>
            </div>

            <div id="debug" style="font-size:20pt"></div>

            <script type="text/javascript" src="js/load.js"></script>
            <script type="text/javascript" src="js/public_micha.js"></script>
            <script type="text/javascript" src="js/levelview.js"></script>
        </div>

    </div>
</body>

</html>
